<template>
<div>
  <div>
    <i class="el-icon-discount" style="color: red;font-size: 20px"></i>
    <span style="font-size: 20px"><b>课程管理</b></span></div><br>
  <el-descriptions title="课程信息">
    <template slot="extra">
      <el-button type="primary" size="">修改</el-button>
    </template>
    <el-descriptions-item label="课程名称">{{this.course.coursename}}</el-descriptions-item>
    <el-descriptions-item label="课程强度">{{this.course.intensity}}</el-descriptions-item>
    <el-descriptions-item label="器械设备">{{this.course.apparatus}}</el-descriptions-item>
    <el-descriptions-item label="身体部位">{{this.course.bodypart}}</el-descriptions-item>
    <el-descriptions-item label="课程价格">{{this.course.price}}</el-descriptions-item>
    <el-descriptions-item label="课程阶段数">{{this.course.stageamount}}</el-descriptions-item>
    <el-descriptions-item label="课程图片">
      <el-image :src="this.course.coursephoto" style="height: 200px;width: 250px; border-radius: 5px;  box-shadow: 0px 0px 6px #888888;">
        <div slot="error" class="image-slot">
          <i class="el-icon-picture-outline"></i>
        </div>
      </el-image>
    </el-descriptions-item>
    <el-descriptions-item label="课程状态"><el-tag size="small">{{this.course.audit}}</el-tag></el-descriptions-item>
    <el-descriptions-item label="课程简介">{{this.course.coursebrief}}</el-descriptions-item>
  </el-descriptions>

  <el-collapse  @change="handleChange">
    <el-collapse-item title="" v-for="(item,index) in this.course.stageamount" :key="index">
      <template slot="title">
        <a>第{{index+1}}阶段</a>
      </template>
      <div style="display:flex;flex-wrap: wrap;">
<!--          <div v-for="(v,indexs) in item" :key="v.id" style="height: 260px;width:380px;margin-right: 7px;margin-left: 25px;margin-top:10px;margin-bottom: 10px">-->
<!--            <VideoShow :src=v.videoaddress  videoWidth=380px></VideoShow>-->
<!--            <p class="Text"><b>{{v.stagename}}</b>-->
<!--            <span class="shanchu" @click="open(v.id)"><i class="el-icon-delete"></i>删除</span>-->
<!--            </p>-->
<!--          </div>-->
<!--            style="margin-left: 1150px"-->
        <div style="height: 260px;width:380px;margin-right: 7px;margin-left: 25px;margin-top:10px;
                    margin-bottom: 10px;background-color: #eaedf1;border-radius: 10px;
                       display:flex;justify-content:center;align-items:center;">
        <el-button type="primary" icon="el-icon-plus" circle @click="dialogFormVisible1=true;transferIndex(index+1)"  ></el-button>
        <el-dialog title="添加教学视频" :visible.sync="dialogFormVisible1"  width="40%" >
          <addstage  v-bind:couid="item[0].courseid" ref="chd"></addstage>
        </el-dialog>
        </div>
      </div>
    </el-collapse-item>
  </el-collapse>
  <br>
  <div style="display:flex;align-items:center;justify-content:center">
  <el-button type="danger"  @click="del()">删除课程</el-button>
  <el-button type="warning" @click="noc()">暂不发布</el-button>
  <el-button type="success" @click="suc()">发布课程</el-button>
  </div>
</div>
</template>

<script>
import VideoShow from "../video/VideoShow";
import addstage from "./addstage";
export default {
  name: "addfood",
  components:{
    VideoShow:VideoShow,
    addstage:addstage
  },
  data() {
    return {
      dialogFormVisible1: false,
      course:{
        id: null,
        adminid:null,
        coursename:null,
        coursebrief: null,
        intensity: null,
        apparatus: null,
        bodypart: null,
        coursephoto:null,
        price: null,
        audit: null,
        stageamount: null
      },
      stage:[],
      stagequeue:[],
      // fileList: [],
      // form: {
      //   id:"",
      //   videotitle:"",
      //   videoaddr:"",
      //   brief:"",
      //   createtime:"",
      }
    }
  ,
  methods: {
    transferIndex(index){
       this.$refs.chd.getIndex(index);
    },
    open(id) {
      this.$confirm('此操作将永久删除该课程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var url="/stage?idList="+id;
        this.$axios.delete(url)
          .then( (res)=> {
           console.log(res)
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            function myMessage() {
                          location.reload(true);
                        }
                        setTimeout(myMessage, 500);

          }).catch(function (error) {
          console.log(error);
        } );
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    del() {
      this.$confirm('此操作将永久删除该课程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(this.course.id);
        var url="/course?idList="+this.course.id;
        this.$axios.delete(url)
          .then( (res)=> {
            console.log(res)
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            // function myMessage() {
              this.$router.push("/coursede");
            // }
            // setTimeout(myMessage, 500);

          }).catch(function (error) {
          console.log(error);
        } );
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    noc() {
      var data = {
        "audit": 0,
        "id": this.course.id
      };
      console.log(data)
      var url='/course';
      this.$axios.put(url,data)
          .then( (res)=> {
            console.log(res)
            this.$message({
              type: 'success',
              message: '设置成功!'
            });
            // function myMessage() {
            this.$router.push("/coursede");
            // }
            // setTimeout(myMessage, 500);

          }).catch(function (error) {
          console.log(error);
        } );
    },
    suc() {
      var data = {
        "audit": 1,
        "id": this.course.id
      };
      console.log(data)
      var url='/course';
      this.$axios.put(url,data)
        .then( (res)=> {
          console.log(res)
          this.$message({
            type: 'success',
            message: '设置成功!'
          });
          // function myMessage() {
          this.$router.push("/coursede");
          // }
          // setTimeout(myMessage, 500);

        }).catch(function (error) {
        console.log(error);
      } );
    },
    handleChange(val) {
      console.log(val);
    },
    indexs:function(){
      //根据接收到course的id信息并展示
      var id=this.$route.query.courseid;
      console.log(id);
      var url="/course/"+id;
      this.$axios.get(url)
        .then( (res)=> {
           console.log(res)
          console.log(res.data.data[0].id)
            this.course.id=res.data.data[0].id;
            this.course.adminid=res.data.data[0].adminid;
            this.course.coursename=res.data.data[0].coursename;
            this.course.coursebrief= res.data.data[0].coursebrief;
            this.course.intensity=res.data.data[0].intensity;
            this.course.apparatus= res.data.data[0].apparatus;
            this.course.bodypart= res.data.data[0].bodypart;
            this.course.coursephoto=res.data.data[0].coursephoto;
            this.course.price=res.data.data[0].price;
          if(res.data.data[0].audit===0){
            this.course.audit="未发布";
          }
          else {
            this.course.audit="已发布";
          }
            this.course.stageamount=res.data.data[0].stageamount;
            console.log(this.course.coursename+"---------------------------------------")
        }).catch(function (error) {
        console.log(error);
      } );
     //通过courseid来查询其下的课程
      var url2="/stage/"+id;
      this.$axios.get(url2)
        .then( (res)=> {
          console.log("阶段课程")
          let queue;
          this.stage=[];
          for(queue=1;queue<=this.course.stageamount;queue++){
            this.stagequeue=[];
               for(let i=0;i<res.data.data.length;i++){
                 if(queue===res.data.data[i].stagequeue){
                   console.log(res.data.data[i])
                   let row = {} // 定义一个当前添加数据的行
                   row.id=res.data.data[i].id;
                   row.courseid= res.data.data[i].courseid;
                   row.stagename=res.data.data[i].stagename;
                   row.stagequeue=res.data.data[i].stagequeue;
                   row.videoaddress=res.data.data[i].videoaddress;
                   this.stagequeue.push(row);
                 }
             }
            this.stage.push(this.stagequeue);
          }
           console.log(this.stage)
        }).catch(function (error) {
        console.log(error);
      } );

    },
  },
  created(){
    //自动加载indexs方法
    this.indexs();
  },
}
</script>

<style scoped>
p.Text {
  /* 设置固定的宽度 */
  /*width: 400px;*/
  font-size:17px ;
  /* 裁剪多余的 */
  overflow: hidden;
  /* 多余的以省略号出现 */
  text-overflow: ellipsis;
  /* 将对象作为弹性伸缩盒子模型显示 */
  display: -webkit-box;
  /* 限制再一个块元素再文本显示的行数 */
  -webkit-line-clamp: 1;
  /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-box-orient: vertical;
  text-align: center;
}
.shanchu{
  color: #888888;
  font-size: 15px;
  cursor:pointer;
}
.shanchu:hover{
  color: red;
}
</style>
